<template>
	<view class="orderDetail_box">
		<!-- 待出行 -->
		<view class="state_box">
			<view class="top dis_fx">
				<view class="flex1">
					<view class="state">待出行</view>
				</view>
				<view class="state_r text_right">
					<view class="price">￥318.00</view>
					<text>价格明细</text>
				</view>
			</view>
		</view>
		<!-- 拼团中 -->
		<view class="state_box">
			<view class="top dis_fx">
				<view class="flex1">
					<view class="state state3">拼团中</view>
					<view class="prompt">差<text>2</text>人成团</view>
				</view>
				<view class="state_r text_right">
					<view class="price">￥318.00</view>
					<text>价格明细</text>
				</view>
			</view>
		</view>
		<view class="addit_item">
			<view class="item">
				<view class="tit">产品信息</view>
				<view class="s_tit"><navigator url="" class="dis_fx fx_column"><text>冰雪奇缘 九寨沟 熊猫基地 大美四川3日游</text><view class="icon"></view></navigator></view>
				<view class="info">出行日期：2109-1-29~2019-1-22</view>
				<view class="info">￥1344元/*2人</view>
			</view>
			<view class="item">
				<view class="tit">出行人</view>
				<view class="s_tit"><text>出行人1：张三   15096325406</text></view>
				<view class="info">证件号：345123199012280911</view>
				<view class="s_tit"><text>出行人2：李四   15096325406</text></view>
				<view class="info">证件号：345123199012280911</view>
			</view>
			<view class="item">
				<view class="tit">地接信息</view>
				<view class="s_tit"><text>联系人：王五   15096325406</text></view>
				<view class="info">导游/司机：小哥  15454565454</view>
				<view class="info">集合地点：你猜</view>
				<view class="info">备注：</view>
			</view>
		</view>
		<!-- 待出行按钮 -->
		<button class="pub_btn">编辑</button>
		<!-- 拼团中按钮 -->
		<button class="pub_btn">设为成团</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchWord:'',
				bannerArr:[],
				targetAddress: [],
				hotTravel: [],
			}
		},
		onLoad(){
			
		},
		methods: {
			
		}
	}
</script>

<style>
	.pub_btn{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100upx;
		background: #FFC800;
		color: #333333;
		font-size: 36upx;
		line-height: 100upx;
		text-align: center;
		border-radius: 0;
	}
	.pub_btn::after{
		border: 0 none;
	}
	.orderDetail_box{
		padding: 24upx 24upx 150upx;
	}
	.orderDetail_box .state_box{
		box-shadow: 0 0 18upx 0 rgba(106, 79, 13, 0.12);
		border-radius: 10upx;
		padding: 24upx 24upx 70upx;
	}
	.orderDetail_box .state_box .state{
		color: #333333;
		font-size: 48upx;
		font-weight: 600;
	}
	.orderDetail_box .state_box .state.state2{
		color: #FC5C1D
	}
	.orderDetail_box .state_box .state.state3{
		color: #333333
	}
	.orderDetail_box .state_box .prompt{
		color: #999999;
		font-size: 28upx;
	}
	.orderDetail_box .state_box .prompt text{
		color: #FC5C1D;
	}
	.orderDetail_box .state_box .price{
		color: #FFC800;
		font-size: 32upx;
		margin-top: 10upx;
	}
	.orderDetail_box .state_box .state_r text{
		color: #999999;
		font-size: 24upx;
	}
	.orderDetail_box .bottom{
		margin-top: 100upx;
	}
	.orderDetail_box .bottom .item{
		margin: 0 80upx;
	}
	.orderDetail_box .bottom .item.item1 image{
		width: 40upx;
		height: 38upx;
	} 
	.orderDetail_box .bottom .item.item2 image{
		width: 32upx;
		height: 40upx;
	} 
	.orderDetail_box .bottom .item text{
		font-size: 32upx;
		color: #333333;
		margin-left: 30upx;
	}
	.orderDetail_box .addit_item{
		line-height: 2;
	}
	.orderDetail_box .addit_item .tit{
		color: #333333;
		font-size: 32upx;
		margin: 30upx 0 10upx;
		font-weight: 600;
	}
	.orderDetail_box .addit_item .s_tit .icon{
		background: url() no-repeat center/contain;
		width: 13upx;
		height: 28upx;
		margin-left: 20upx;
	}
	.orderDetail_box .addit_item .s_tit{
		font-size: 28upx;
		color: #333333;
	}
	.orderDetail_box .addit_item .info{
		font-size: 28upx;
		color: #999999;
	}
</style>
